<template>
	<view class="homeBox">
		<view class="weather_box" :style="{background: 'url('+imageURL+')',backgroundSize:'cover',height:screenHeight+'px'}" v-if="weatherList">
			<!-- 天气模块 -->
			<view class="today_weather" v-if="weatherList.length>0">
				<view class="image_box">
					<image :src="getImageSrc(weatherList[0])" mode=""></image>
				</view>
				<view class="content_box">
					{{weatherList[0].celsius}}
				</view>
				<view class="weather">
					{{weatherList[0].weather}}
				</view>
			</view>
			<!-- 微博热搜模块 -->
			<scroll-view class="weibo_hot" scroll-y @scroll="handleScroll" show-scrollbar="false">
				<view class="header_item"></view>
				<view :class="['weibo_box',activeIndex==index?'active':'']" v-for="(item,index) in weiboHotList" :key="index" >
						{{item.content}}
				</view>
				<view class="footer_item"></view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {get,post, showModel,showSuccess} from '@/config/request.js'
	export default{
		data(){
			return {
				imageURL: 'https://i.niupic.com/images/2021/08/08/9qru.jpg',
				weatherList:[],
				imageTyprSrc:'',
				screenHeight:'',
				weiboHotList:[],
				activeIndex:0
			}
		},
		computed:{
		},
		onLoad() {
			this.screenHeight=uni.getSystemInfoSync().windowHeight
			console.log("ceshi")
			this.getMeather()
			this.getWeibo()
		},
		onReady(){
		},
		methods:{
			// 获取当天的天气列表
			async getMeather () {
			  const that=this
			  try {
				const res = await get('https://api.muxiaoguo.cn/api/tianqi?city=广州&type=2',{})
				console.log('后端返回2', res)
				that.weatherList=res
				console.log("测试",that.weatherList)
				that.getImageSrc(that.weatherList[0])
			  } catch (err) {
				showModel('获取失败', '服务器出了一点问题，请稍后再试~')
			  }
			},
			//由不同的天气情况返回不同的天气类别图片
			getImageSrc(item){
				if(item.weather.indexOf('晴')!=-1){
					return require('../../static/weather/qingtian.png')
				}
				if(item.weather.indexOf('阴')!=-1){
					return require('../../static/weather/duoyun.png')
				}
				if(item.weather.indexOf('雷')!=-1){
					return require('../../static/weather/shandian.png')
				}else{
					return require('../../static/weather/xiayu.png')
				}
			},
			async getWeibo(){
				const that=this
				try {
					const res = await get('search',{})
					this.weiboHotList=res.splice(1)
					console.log('后端返回3', this.weiboHotList)
				} catch (err) {
					showModel('获取失败', '服务器出了一点问题，请稍后再试~')
				}
			},
			clickWeiboItem(item){
				console.log("点击了：",item.redirectUrl)
				let	url=item.redirectUrl
				uni.navigateTo({
					url: '/pages/webpage/index?redirectUrl='+url,
					success: res => {
						console.log("跳转成功",res)
					},
					fail: (err) => {
						console.log("跳转失败",err)
					},
					complete: () => {}
				});
			},
			handleScroll(event){
				this.activeIndex=Math.round((event.detail.scrollTop)/75)
			},
			changeToNei(){
				wx.navigateToMiniProgram({
					appId: 'wx4e3d8ea6e9aa57c7',
					path: 'pages/shopList/shopList?QSH_status=1&title=内网适用商户',
					extraData: {},
					envVersion: 'trial',//体验版：trial，正式版：release
					success(res) {
					// 打开成功
						console.log(res)
					}
				})
			},
			changeToWai(){
				wx.navigateToMiniProgram({
					appId: 'wx4e3d8ea6e9aa57c7',
					path: 'pages/shopList/shopList?title=外网适用商户',
					extraData: {},
					envVersion: 'trial',//体验版：trial，正式版：release
					success(res) {
					// 打开成功
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.weather_box{
		width: 100%;
		overflow: hidden;
		.today_weather{
			height: 500rpx;
			overflow: hidden;
			.image_box{
				height: 300rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					display: block;
					margin: 100rpx auto 0;
				}
			}
			.content_box{
				font-size: 80rpx;
				font-weight: bold;
				text-align: center;
				margin-top: -80rpx;
				color: #ffffff;
			}
			.weather{
				text-align: center;
				color: #ececec;
				font-weight: bold;
				margin-top: 20rpx;
			}
		}
		.weibo_hot{
			height: 450rpx;
			.weibo_box{
				height: 150rpx;
				line-height: 150rpx;
				text-align: center;
				font-size: 10rpx;
				transition: 1s;
				opacity: 0.3;
			}
			.header_item,.footer_item{
				height: 150rpx;
			}
			.active{
				font-size: 40rpx;
				font-weight: 700;
				opacity: 1;
			}
		}
	}
</style>